<template>
  <div class="page-container">
    <el-row>
      <el-col :span="7" class="menu-col">
        <el-menu
          :default-active="$route.path"
          router
          text-color="#222"
          ref="navMenu"
          active-text-color="red"
          style="min-width: 1300px"
          class="index-menu"
          mode="horizontal">
          <el-menu-item v-for="route in routes"
                        :key="route.path"
                        :index="route.path"
                        :class="$route.path.startsWith(route.path)?'is-active':''">
            <div>
              <i v-bind:class="route.icon"></i>
              {{ route.navItem }}
            </div>
          </el-menu-item>
        </el-menu>
      </el-col>


      
      <el-col :offset="2" :span="11">
        <el-input type="text" v-model="searchKey"
                  class="input-with-select"
                  placeholder="请输入所需要查询的文章"
                  style="margin-top: 10px;caret-color: black;width:60%"
                  @keyup.enter.native="search">
          <el-select v-model="select" slot="prepend" placeholder="请选择" default-first-option>
            <el-option label="篇目名称" value="title"></el-option>
            <el-option label="作者" value="author"></el-option>
            <el-option label="发表会议" value="conference"></el-option>
            <el-option label="科研方向" value="direction"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <el-link type="primary" style="margin-left: 10px" @click="advanceVisible=true">高级搜索</el-link>
      </el-col>

      <!-- 头像下拉菜单     -->
      <el-col :span="4">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            {{ username }}
            <i class="el-icon-arrow-down el-icon--right"></i>

          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,i) in dropdownList"
                              :key="i"
                              :index="item.name"
                              :command="item.command">
              {{item.name}}
            </el-dropdown-item>
            <el-dropdown-item command="logout" divided>登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <!-- 高级搜索表单   -->
    <el-dialog title="高级搜索"
               :visible.sync="advanceVisible"
               @close="clear"
               width="50%">
        <el-form :model="searchForm">
          <el-form-item>
            <el-input type="text"
                      v-model="searchForm.searchKey"
                      style="margin-top: 10px;caret-color: black;"
                      @keyup.enter.native="advanceSearch"
                      placeholder="请输入论文名称">
              <template slot="prepend">内容</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text"
                      v-model="searchForm.author"
                      style="margin-top: 10px;caret-color: black;"
                      @keyup.enter.native="advanceSearch"
                      placeholder="请输入作者">
              <template slot="prepend">论文作者</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text"
                      v-model="searchForm.conference"
                      style="margin-top: 10px;caret-color: black;"
                      @keyup.enter.native="advanceSearch"
                      placeholder="请输入会议名称">
              <template slot="prepend">会议</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text"
                      v-model="searchForm.directionName"
                      style="margin-top: 10px;caret-color: black;"
                      @keyup.enter.native="advanceSearch"
                      placeholder="请输入方向名称">
              <template slot="prepend">方向</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="起始时间" v-model="searchForm.begin" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="终止时间" v-model="searchForm.end" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="advanceSearch">提交</el-button>
            <el-button @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  name: "NavMenu",
  data() {
    return {
      routes: [
        {path: '/index', navItem: '首页', icon: 'el-icon-s-home'},
        {path: '/labor', navItem: '我的实验室', icon: 'el-icon-s-help'},
        {path: '/library', navItem: '论文库', icon: 'el-icon-s-management'},
        {path: '/space', navItem: '我的', icon: 'el-icon-user-solid'}
      ],

      /*
        搜索相关
       */
      select:'title',
      searchKey:'',
      advanceVisible:false,
      searchForm: {
        searchKey:'',
        conference:'',
        author:'',
        directionName:'',
        begin:'',
        end:''
      },
      /*
        用户信息相关
       */
      username: '',
      dropdownList:[
        {name:'我的账户信息',command:'/space/info'},
        {name:'我的实验室',command:'/labor'},
        {name:'我上传的论文',command:'/space/paper'},
        {name:'我的笔记本',command:'/space/note'},
      ],
    }
  },

  methods: {
    handleCommand(command) {
      if (command === 'logout')
        this.logout()
      this.$router.push(command)
    },
    /*
    登出
     */
    logout() {
      this.$axios.get('/user/logout').then(res => {
        if (res.data.data === 1) {
          this.$store.commit('clear')
          this.$router.replace('/login')
        } else {
          this.$message.error('注销失败')
        }
      })
    },
    /*
      普通查询
     */
    search() {
      this.$router.push({
        name:'Result',
        params:{
          select:this.select,
          key:this.searchKey,
        }
      }).then(()=>{
        this.reload()
      }).catch(()=>{
        this.reload()
      })
    },

    /*
      高级查询
     */
    advanceSearch(){
      this.$router.push({
        name:'Result',
        params:{
          select:'advance',
          key:JSON.stringify(this.searchForm)
        }
      }).then(()=>{
        this.reload()
      }).catch(failRes=>{
        this.reload()
      })
    },


    /*
      重置表单
     */
    clear(){
      this.searchForm={
        direction:'',
        searchItem:[
          {value:'',select:'title'},
        ],
        begin:'',
        end:''
      }
    }
  },
  mounted() {
    this.username = this.$store.state.username
    this.routes=this.$store.state.menuList
  }
}
</script>
<style scoped>
.page-container {
  display: inline-block;
}


div, span {
  caret-color: transparent;
}

.el-dropdown-link {
  cursor: pointer;
  color: #42b983;
}

/deep/.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/*/deep/.el-input{*/
/*  width:40%*/
/*}*/

/deep/.el-select .el-input {
  width: 105px;
}
</style>
